<template>
  <div class="home-container">
    <h1>欢迎来到can的个人网站</h1>
    <p>这是一个简洁高效的任务管理系统，帮助您更好地组织和管理日常工作。</p>
    
    <div class="feature-grid">
      <div class="feature-card">
        <h3>📋 任务跟踪</h3>
        <p>轻松创建、编辑和完成任务，随时掌握工作进度。</p>
      </div>
      <div class="feature-card">
        <h3>⏱️ 时间管理</h3>
        <p>合理安排时间，提高工作效率，避免任务拖延。</p>
      </div>
      <div class="feature-card">
        <h3>📊 数据分析</h3>
        <p>通过数据可视化，了解您的工作模式和效率。</p>
      </div>
    </div>
    
    <div class="quick-actions">
      <router-link to="/products" class="btn-primary">浏览功能</router-link>
      <router-link to="/contact" class="btn-secondary">联系我们</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomePage'
}
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.home-container h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #333;
}

.home-container p {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 2rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.feature-card {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.feature-card p {
  font-size: 0.95rem;
  color: #666;
  margin: 0;
}

.quick-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.btn-primary,
.btn-secondary {
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: #42b983;
  color: white;
  border: 2px solid #42b983;
}

.btn-primary:hover {
  background-color: #35495e;
  border-color: #35495e;
}

.btn-secondary {
  background-color: white;
  color: #42b983;
  border: 2px solid #42b983;
}

.btn-secondary:hover {
  background-color: #42b983;
  color: white;
}
</style>